<template>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="detailImgList" :index="index">
    </Detail>
    <div v-show="!showDetail" class="bigBox" ref="bigBox">
        <div class="header">
            <div class="left">
                <h1 class="title">波奇壁纸</h1>
                <div class="search" @click="goSearch">
                    请输入关键词搜索
                    <Search></Search>
                </div>
            </div>
            <div class="right">
                <div class="item" @click="themes.changeTheme">
                    <Light v-if="theme == 'light'"></Light>
                    <Dark v-else></Dark>
                </div>
                <div class="item" @click="goSetting">
                    <Setting></Setting>
                </div>
            </div>
        </div>
        <div class="classify">
            <el-carousel class="swiper" :interval="5000" arrow="hover">
                <el-carousel-item v-for="(item, index) in pics" :key="item" @click="handleClick(index)">
                    <img :src="item" alt="">
                </el-carousel-item>
            </el-carousel>
            <div class="classifyList">
                <div class="item" @click="goMoHu">萌虎壁纸</div>
                <div class="item" @click="goMobileImg">手机壁纸</div>
                <div class="item" @click="go360Img">360壁纸</div>
                <div class="item" @click="goPexels">Pexels</div>
                <div class="item" @click="goBing">Bing</div>
                <div class="item" @click="goImg4K">4K壁纸</div>
                <div class="item" @click="goMoeImg">萌える嘘</div>
            </div>
        </div>
        <div class="imgList">
            <ImgList :imgList="imgList" @viewPicture="viewPicture"></ImgList>
            <p>没有更多了~~~</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { themeStore } from '@renderer/store/theme'
import { storeToRefs } from 'pinia'
import { onMounted, ref, onBeforeUnmount } from 'vue'
import Light from '@renderer/components/theme/light.vue'
import Dark from '@renderer/components/theme/dark.vue'
import Setting from '@renderer/components/theme/setting.vue'
import Search from '@renderer/components/theme/search.vue'
import _ from 'lodash'
import { settingStore } from '@renderer/store/setting'
import { getMoHuList } from '@renderer/api/mohu'
import goRouter from './goRouter'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
const { myApi, goSetting, goSearch, goMoHu, goMobileImg, go360Img, goPexels, goBing, goImg4K, goMoeImg } = goRouter()
const set = settingStore()
const bigBox = ref<HTMLElement | null>(null)
const themes = themeStore()
const { theme } = storeToRefs(themes) as any
const pics = ref([])

const imgList = ref<any[]>([])
const detailImgList = ref<any[]>([])
const showDetail = ref(false)
const index = ref(0)



const handleClick = (num: number) => {
    index.value = num
    detailImgList.value = pics.value.map((el: any) => {
        return {
            src: el,
            source: el.replace('mw1024', 'large'),
            title: ''
        }
    })
    showDetail.value = true
}

const getSwiperList = async () => {
    const obj = {
        return: 'json',
        id: 'pc',
        num: 5,
        random: Math.random(),
        size: 'mw1024'
    }
    const res = await getMoHuList(obj)
    pics.value = res.pic
}
const getHomeList = async () => {
    const obj = {
        return: 'json',
        id: 'pc',
        num: 20,
        random: Math.random(),
        size: 'mw1024'
    }
    const res = await getMoHuList(obj)
    imgList.value = res.pic.map((el: any) => {
        return {
            src: el,
            source: el.replace('mw1024', 'large'),
            title: ''
        }
    })
}
const viewPicture = (num: number) => {
    detailImgList.value = imgList.value
    index.value = num
    showDetail.value = true
}
const closePicture = () => {
    showDetail.value = false
}
const scrollEvent = _.throttle(() => {
    const header = document.querySelector('.header') as HTMLElement
    if (bigBox.value!.scrollTop > 300) {
        header.style.top = '-100px'
    } else {
        header.style.top = '0'
    }
}, 100)
const moveEvent = _.throttle((e: any) => {
    const header = document.querySelector('.header') as HTMLElement
    if (e.clientY < 50) {
        header.style.top = '0'
    }
}, 100)
getSwiperList()
getHomeList()
onMounted(() => {
    myApi.value = window.api
    myApi.value.onUpdateStorage((_, data) => {
        set.$state = JSON.parse(data)
    })
    bigBox.value?.addEventListener('scroll', scrollEvent)
    document.addEventListener('mousemove', moveEvent);
})
onBeforeUnmount(() => {
    bigBox.value?.removeEventListener('scroll', scrollEvent)
    document.removeEventListener('mousemove', moveEvent)
})
</script>

<style scoped lang="scss">
.bigBox {
    box-sizing: content-box;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    @include mixin.scroll_bar();
    position: relative;
    box-sizing: border-box;

    .header {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 60px;
        gap: 10px;
        padding: 10px;
        position: sticky;
        z-index: 10;
        top: 0;
        left: 0;
        align-items: center;
        z-index: 1000;
        background-color: var(--back);
        cursor: pointer;
        box-shadow: 0.1em 0.2em 0.3em #8f8f8f4e;
        transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);


        .left {
            display: grid;
            grid-template-columns: 180px 1fr;
            align-items: center;

            h1 {
                text-align: center;
                font-family: '华文行楷';
            }

            .search {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 10px;
                width: 100%;
                background-color: #8080801c;
                padding: 3px 15px;
                cursor: pointer;
                color: grey;
                transition: all 0.3s;

                &:hover {
                    background-color: #80808050;
                }
            }
        }

        .right {
            display: flex;
            gap: 10px;

            .item {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                cursor: pointer;
                overflow: hidden;
                box-shadow: 0 0 5px grey;
            }
        }
    }

    .classify {
        display: grid;
        min-height: 50vh;
        gap: 10px;
        padding: 10px;
        grid-template-columns: 5fr 2fr;

        .swiper {
            position: relative;
            background: linear-gradient(135deg, #2277ff, #c6e3e8);
            border-radius: 10px;
            user-select: none;


            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                cursor: pointer;
            }


            :deep(.el-carousel__container) {
                height: 100% !important;
                overflow: hidden !important;
            }

        }

        .classifyList {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 10px;

            .item {
                text-align: center;
                box-shadow: 0 0 5px grey;
                border-radius: 10px;
                cursor: pointer;
                user-select: none;
                transition: all 0.6s;
                font-size: 20px;
                font-weight: bold;
                color: white;
                background-size: cover;
                background-position: center;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, #22bdff, #2277ff);
                background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #41d9ff 20%, rgba(255, 255, 255, 0) 71.88%), #29f;
                box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
                transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);

                &:hover {
                    background: linear-gradient(135deg, #2277ff, #c6e3e8);
                }
            }
        }
    }

    .imgList {
        min-height: 60vh;
        padding: 5px;


        p {
            text-align: center;
            color: #808080a4;
        }
    }
}
</style>